<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>


<script src="vue.global.js"></script>
<script>
    const vue=Vue.createApp({
        data(){
            return{
            }
        },
        components:{
            'button-counter':{
                template:'<button type="button" @click="num++">{{ num }}</button>',
                data(){
                    return{
                        num: 0
                    }
                }
            }
        }
    }).mount('#app')
</script>
</body>
</html>